<!--
 * @Author: 叶敏轩 mc20000406@163.com
 * @Date: 2024-01-23 11:17:17
 * @LastEditors: 叶敏轩 mc20000406@163.com
 * @LastEditTime: 2024-01-30 01:34:36
 * @FilePath: /waterfall/src/App.vue
 * @Description: 
-->
<template>
  <div class="content">
    <div class="waterfall1">
      <Waterfall
        :data="data"
        :col="5"
        :gutterWidth="10"
        :visibleItemCount="20"
        :columnImgPadding="5"
        :contentHeight="54"
        :calc-item-height="calcItemHeight"
      >
        <template #item="{ item }">
          <WaterfallItem
            :item="item"
            :onlyImage="false"
          ></WaterfallItem>
        </template>
      </Waterfall>
    </div>
  </div>
</template>
<script setup lang="ts">
import Waterfall from "./waterfall.vue";
import WaterfallItem from "./waterfallItem.vue";
import { data } from "./data";
import {calcItemHeight} from './utils'
</script>
<style scoped lang="less">
.content {
  width: 100%;
  height: 100%;
  display: flex;
  & > div {
    flex: 1;
  }
}
.waterfall {
  :deep(.waterfallItem) {
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.6);
    .content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: calc(100% - 10px);
      color: #fff;
      .title {
        margin-top: 5px;
        line-height: 14px;
        font-size: 14px;
        font-weight: bold;
      }
      .value {
        margin-top: 8px;
        font-size: 12px;
        line-height: 12px;
        font-weight: bold;
      }
    }
  }
}
</style>
